<template>
  <view class="clockin-detail-page">
    <uni-page-header title="打卡详情" />
    <view class="content-container">
      <view v-for="(item, index) in detailList" :key="index" class="detail-card">
        <view class="title">第{{ numUppercase[index] }}次打卡</view>
        <view class="content">{{ item.content }}</view>
        <view class="img-list">
          <image
            v-for="(img, img_idx) in item.imgList"
            :key="img_idx"
            lazy-load
            :src="img"
            class="img"
            @click="onPreview(img)"
          />
        </view>
        <view class="date">打卡时间：{{ item.clockin_date }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  mapState
} from 'vuex'
import {
  getImgs
} from '../utils/index.js'
import {
  wx_clockin_log_list
} from '../api/index.js'
export default {
  name: 'ClockInDetail',
  data() {
    return {
      numUppercase: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'],
      clockInDate: '',
      detailList: []
    }
  },
  computed: {
    ...mapState(['clockInRuleData'])
  },
  onLoad(params) {
    this.clockInDate = params.date
    this.getDetailData()
  },
  methods: {
    async getDetailData() {
      uni.showLoading()
      const _this = this
      const params = {
        is_details: true,
        clockin_date: this.clockInDate,
        ruleid: this.clockInRuleData.id
      }
      try {
        const {
          clockin_details
        } = await wx_clockin_log_list(params)
        console.log('打卡记录详情')
        console.log(clockin_details)
        Promise.all(clockin_details.map(e => {
          const {
            image,
            clockin_date
          } = e
          e.clockin_date = _this.$utils.dateFormat(clockin_date, 'YYYY-MM-DD HH:mm')
          e.imgList = getImgs(image)
          return e
        })).then(res => {
          uni.hideLoading()
          console.log('处理后的打卡详情')
          console.log(res)
          _this.detailList = res
        })
      } catch (error) {
        uni.hideLoading()
      }
    },

    onPreview(imgSrc) {
      this.$utils.previewImg([imgSrc])
    }
  }
}
</script>

<style lang="scss" scoped>
	.clockin-detail-page {
		.content-container {
			width: 95%;
			margin: 20rpx auto;
			padding-bottom: 20rpx;

			.detail-card {
				padding: 26rpx;
				margin-bottom: 20rpx;
				background-color: #FFF;
				border-radius: 20rpx;
				box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(0,0,0,0.05);

				.title {
					padding-bottom: 26rpx;
					margin-bottom: 20rpx;
					border-bottom: 1Px solid #e6e6e6;
					font-size: 32rpx;
					font-weight: bolder;
				}

				.content {
					font-size: 28rpx;
				}

				.img-list {
					@include flex-column-center;
					gap: 5%;
          flex-wrap: wrap;
					.img {
						width: 30%;
						height: 200rpx;
						border-radius: 10rpx;
            margin: 20rpx 0 14rpx;
					}
				}

				.date {
					font-size: 24rpx;
					color: rgba(0, 0, 0, 0.5);
				}
			}
		}
	}
</style>
